<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>成功案例</title>
    <link rel="stylesheet" href="/css/cases.css">
    <link rel="stylesheet" href="/css/common.css">
    <link href="/layui-v2.6.4/css/layui.css" rel="stylesheet">
    <script src="/layui/layui.js"></script>
    <script src="/layui/jquery.min.js"></script>
    <script src="/layui/axios.min.js"></script>
    <script src="/layui/vue.min.js"></script>
</head>

<body>
    <!-- 头部 -->
    <div th:replace="common/common::head1"></div>
    <!-- 导航 -->
    <div th:replace="common/common::head2"></div>
    <!--横幅-->
    <div th:replace="common/common::head3"></div>
    <!-- 主体部分 -->
    <section class="main_body">
        <div class="container">
            <div class="ss">
                <div th:replace="common/common::head4"></div>
                <article>
                    <main class="container">
                        <div>
                            <p class="ding">成功案例</p>
                            <p><a href="/front/index">首页</a><a href="#">>>成功案例</a></p>
                        </div>
                    </main>
                </article>
            </div>

        </div>

    </section>
    <!-- 图片主体部分 -->
    <section class="pic_body">
        <main class="container">
            <div class="pic" id="cases">

            </div>
            <div id="demo20"></div>
        </main>
    </section>

    <!-- 尾部 -->
    <div th:replace="common/common::footer"></div>
</body>
<script>
    layui.use(['form','laypage'],function () {
        var form = layui.form,laypage = layui.laypage;

        var casesData = []

        axios.get('/front/cases/getAll').then(res => {
            casesData = res.data.data;
        })

        setTimeout(function () {
            //调用分页
            laypage.render({
                elem: 'demo20'
                ,count: casesData.length
                ,limit: 6
                ,jump: function(obj){
                    //模拟渲染
                    document.getElementById('cases').innerHTML = function(){
                        var arr = []
                            ,thisData = casesData.concat().splice(obj.curr*obj.limit - obj.limit, obj.limit);
                        layui.each(thisData, function(index, item){
                            arr.push('<div class="law">\n' +
                                '                    <a href="'+'/front/cases/detail/'+item.id+'">\n' +
                                '                        <img src="'+item.casesImage+'" alt="" width="200px" height="150px">\n' +
                                '                        <ul>\n' +
                                '                            <li class="contract">'+item.casesTitle+'</li>\n' +
                                '                            <li>'+item.casesSimpleIntroduce+'</li>\n' +
                                '                        </ul>\n' +
                                '                    </a>\n' +
                                '                </div>');
                        });
                        return arr.join('');
                    }();
                }
            });
        },100)

    })
</script>
</html>
